<template>
  <div id="">
    <headerbox :headerTitle="'赛事'" :hasBack='false'></headerbox>
    <!-- <div v-for="eventItem in matchList" :key="eventItem.key" class="mb10">
      <eventItem :eventItem="eventItem" @click.native="toEventdetail(eventItem.id)"></eventItem>
    </div> -->
    <v-scroll :on-refresh="onRefresh" :on-infinite="enableInfinite ? onInfinite : undefined">
      <div v-for="eventItem in matchList" :key="eventItem.key" class="mb10">
        <eventItem :eventItem="eventItem" @click.native="toEventdetail(eventItem.id)"></eventItem>
      </div>
    </v-scroll>
    <footerNav></footerNav>
  </div>
</template>
<script>
import {matchListIndex} from '@/utils/ajaxRequest.js';
import vScroll from '@/components/loadMore/loadMore';
export default {
  name: "",
  data: () => ({
    matchList:[],
    pageNo:1,
    enableInfinite:true,
  }),
  components: {
    eventItem:()=>import('./eventItem/eventItem'),
    vScroll,
  },
  methods: {
    onRefresh(done) {   //刷新
      this.pageNo = 1;
       this.getMatchList();
       done() // call done
    },
    onInfinite(done) {    //加载
        let self = this;
        self.enableInfinite = false;
        this.pageNo++;
        this.getMatchList();
        done();
     },
    toEventdetail(matchId) {
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      if (!xlyd_loginInfo) {
        this.messageBox.confirm('登录后查看赛事详情~').then(active=>{
          this.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        })
        return false
      }
      this.$router.push({path:'/eventDetail',query:{matchId:matchId}});
    },
    getMatchList() {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      let userToken = xlyd_loginInfo? xlyd_loginInfo.token : '';
      console.log(self.pageNo);
      let matchParam = {
        token:userToken,
        currentPage:self.pageNo
      }
      matchListIndex(matchParam).then(res=>{
        console.log(res);
        if(res){
          let result = res.data.result;
          if (result.length<1) {
            self.enableInfinite = false;    //关闭上拉加载
          }else{
            self.enableInfinite = true;     //打开上拉加载
          }
          if (self.pageNo==1) {
            self.matchList = result;
          }else{
            self.matchList = self.matchList.concat(result);
            console.log(self.matchList);
          }

        }
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    self.getMatchList();
  }
}
</script>
<style lang="scss" scoped>
.eventLink{
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  img{
    width: 15px;
  }
}
.eventbox{
  height: 140px;
  background: rgba(0,0,0,0.4);
  color: white;
  @include flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  div{
    width: 100%;
  }
  .addrTime{
    font-size: 12px;
  }
}
</style>
